<template>
  <div class="container-layer-releasedynamic">
    <textarea v-model="form.content" class="block-releasedynamic-textarea" cols="30" rows="10" placeholder="写下你想说的吧…" />
    <ItemPhoto :data-list="form.photo" />
    <!-- 按钮 -->
    <div class="submit-btn" @click="submit">发布</div>
  </div>
</template>

<script>
// api
import { createDynamic } from '@/api/dynamic'
import ItemPhoto from '@/components/item/ItemPhoto'
export default {
  components: {
    ItemPhoto
  },
  data() {
    return {
      form: {
        content: '',
        photo: []
      }
    }
  },
  watch: {
    imageList() {
      console.log(this.form.photo)
    }
  },
  methods: {
    async submit() {
      console.log(this.form)
      const res = await createDynamic(this.form)
      console.log(res)
      alert(res.msg)
      this.$router.replace({ name: 'dynamic' })
    }
  }
}
</script>

<style lang="less" scoped>
.container-layer-releasedynamic {
  .block-releasedynamic-textarea {
    width: 100%;
    padding: 20px;
    border: 0;
    outline: 0;
    font-size: 17px;
    box-sizing: border-box;
    resize: none;
  }
  .container-dynamic-upload {
    width: calc(100vw / 3 - 1.5vw);
    height: calc(100vw / 3 - 1.5vw);
    position: relative;
    padding: 1vw;
    box-sizing: border-box;
    border: 2px dotted;
    border-radius: 10px;
    color: #aaa;
    .miva-plus {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 40px;
    }
  }
  .submit-btn {
    width: 100%;
    position: fixed;
    bottom: 0;
    padding: 10px;
    text-align: center;
    background-color: #f45050;
    color: #fff;
  }
  padding-bottom: 50px;
}
</style>
